import 'package:flutter/material.dart';

// 定义一个 StatelessWidget，用于展示盒布局模型
class BoxPage extends StatelessWidget {
  // 构造函数，接收一个可选的 key 参数
  const BoxPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 返回一个 Scaffold 组件，它提供了基本的应用栏、抽屉等 Material Design 布局结构
    return Scaffold(
      // appBar 定义了页面的应用栏
      appBar: AppBar(
        // title 设置应用栏的标题
        title: const Text('盒布局模型'),
      ),
      // body 是页面的主要内容区域
      // 使用 SingleChildScrollView 使得内容超出屏幕时可以滚动，但这个视口只能包含一个子组件 (child)
      body: SingleChildScrollView(
        // child 是 SingleChildScrollView 的子组件，这里使用 Column 进行垂直布局
        child: Column(
          // children 接收一个 Widget 列表，这些 Widget 会在 Column 中垂直排列
          // List.generate 用于生成一个包含 1000 个 ListTile 的列表
          // 这种方式会一次性创建所有列表项，对于大量数据可能导致性能问题，因为它不是懒加载的
          children: List.generate(1000, (index) {
            // 返回一个 ListTile 组件作为列表项
            return ListTile(
              // title 显示列表项的文本内容，这里显示索引号
              title: Text('盒布局列表项 #${index + 1}'),
            );
          }),
        ),
      ),
    );
  }
}
